<template>
  <div class="topp">
    <div class="header">
        <span :class="{like:fIndex==index}" @click="touch(index)" v-for="(item,index) in data" :key=index>{{item}}</span>
    </div>
    <div class="mid" v-for="(item,index) in list" :key=index>
        <img :src="item.pic" alt="">
        <div class="introduce">
            <h5>{{item.shop}}</h5>
            <p>{{item.goods}}</p>
            <div class="nav">
                <div class="price">
                    <h5>爆爆团价</h5>
                    <span>￥{{item.price}}</span><br>
                    <del>￥50</del>
                </div>
                <div class="touch">
                    <button @click="fast(item)">{{item.take?'已领取':'马上强'}}</button><br>
                    <span>已售{{item.sell}}份</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
let pic = "https://img0.baidu.com/it/u=482708609,2109774994&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=280"
export default {
    data(){
        return{
            fIndex:0,
            data:['正在抢购','上新预购'],
            list:[
                {pic:pic,shop:'汉堡王|新天地餐厅',goods:'买1送1明星皇堡|用心火烤 肉质紧实 鲜嫩多汁 爆爆团',price:25,sell:9029,take:false},
                {pic:pic,shop:'华莱士汉堡|新天地餐厅',goods:'华莱士|聚划算单人套餐| 进店必选',price:12.12,sell:173,take:false},
                {pic:pic,shop:'陕西特产|新天地餐厅',goods:'果然粗220g 【爆爆团】',price:15,sell:9029,take:false}
            ]
        }
    },
    methods:{
        touch(index){
            this.fIndex=index
        },
        fast(item){
            item.take = true
        }
    }
}
</script>

<style lang="scss" scoped>
.topp .header{
    background: orangered;
    padding: 30vw 0 5vw 4vw;
}
.header span{
    color: white;
    margin-right: 2vw;
    font-weight: bold;
}
.like{
    text-decoration: underline;
}
.mid{
    margin:  4vw;
    display: flex;

}
.mid img{
    width: 36vw;
    height: 34vw;
    margin-right: 2vw;
}
.mid .introduce{
    width: 64vw;
    height: 30vw;
    // background: gold;
}
.introduce .nav{
    display: flex;
    justify-content: space-between;
}
.introduce h5{
    color: gray;
}
.introduce p{
    font-weight: bolder;
    margin: 2vw 0;
    font-size: 4vw;
}
.introduce .price h5{
    color:  red;
}
.introduce .price span{
    color: red;
}
.introduce .price del{
    color: gray;
}
.introduce .touch button{
    width: 20vw;
    height: 8vw;
    background: orangered;
    outline: none;
    border: none;
    border-radius: 4vw;
    color: wheat;
}
.introduce .touch span{
    font-size: 3vw;
    padding-left: 2vw;
    color: orangered;
}
</style>